import 'package:citiesocial/_include.dart';
import 'package:cached_network_image/cached_network_image.dart';

///
///首页轮播图组件
///
class BannerIndex extends BaseStatefulWidget {
  final List<BannerEntity> list;
  final OnBannerClick onClick;

  BannerIndex(this.list, {this.onClick});

  @override
  State<StatefulWidget> createState() => _BannerIndexState();
}

class _BannerIndexState extends BaseState<BannerIndex> {
  final height = 180.0,
      _indicatorSize = 7.5,
      _indicatorBetween = 3.0,
      _indicatorMargin = 15.0;

  PageController _pageController;
  int _position = 0;

  _BannerIndexState() : super() {
    _pageController = PageController();
    _pageController.addListener(() {
      int page = _pageController.page.round();
      if (page != _position) {
        setState(() {
          _position = page;
        });
      }
    });
  }

  void onBannerItemTap(int index) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => ActivityDetail(
                  id: widget.list[index].link,
                )));
  }

  List<Widget> _getIndicator() {
    if (widget.list == null || widget.list.length == 0) return [];
    List<Widget> result = List();
    for (int index = 0; index < widget.list.length; index++) {
      var circle = Container(
        margin: EdgeInsets.symmetric(horizontal: _indicatorBetween),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: _position == index ? Colors.white : Colors.grey,
        ),
        width: _indicatorSize,
        height: _indicatorSize,
      );
      result.add(circle);
    }
    return result;
  }

  @override
  Widget build(BuildContext context) => Container(
        child: Stack(
          children: <Widget>[
            PageView.builder(
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Image(
                        image: CachedNetworkImageProvider(
                          widget.list[index].imgurl,
                        ),
                        height: height,
                        fit: BoxFit.cover,
                      ),
                      Align(
                        child: Wrap(
                          children: <Widget>[
                            Container(
                              child: Text(
                                '${widget.list[index].desc_up}',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 15.0,
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              width: double.infinity,
                              margin: EdgeInsets.symmetric(horizontal: 10.0),
                            ),
                            Container(
                              child: Row(
                                // mainAxisAlignment: MainAxisAlignment.spaceAround,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Expanded(
                                    child: Text(
                                      '${widget.list[index].desc_down}',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 17.0,
                                      ),
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                  Image.asset(
                                    'imgs/js_cells_img_more_w.png',
                                    width: 20.0,
                                    height: 20.0,
                                  )
                                ],
                              ),
                              width: double.infinity,
                              margin: EdgeInsets.symmetric(
                                  horizontal: 10.0, vertical: 5.0),
                            ),
                          ],
                        ),
                        alignment: Alignment.bottomCenter,
                      ),
                    ],
                  ),
                  onTap: () => onBannerItemTap(index),
                );
              },
              itemCount: widget.list == null ? 0 : widget.list.length,
              controller: _pageController,
            ),
            Container(
              alignment: AlignmentDirectional.bottomCenter,
              margin: EdgeInsets.all(_indicatorMargin),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: _getIndicator(),
              ),
            ),
          ],
        ),
        height: height,
      );
}
